<template>
  <XnDialog custom-class="branch_dialog" title="历史评价" :visible.sync="selfVisible" @close="close">
    <div class="mytable">
      <vxe-table
        class="mytable-scrollbar"
        border
        stripe
        height="100%"
        row-id="id"
        size="medium"
        resizable
        :scroll-y="{ enabled: false }"
        :data="tableData"
        highlight-hover-row
        header-align="center"
        align="center"
        :span-method="mergeRowMethod">
        <vxe-column type="seq" title="序号" width="60" fixed="left"></vxe-column>
        <vxe-column
          field="leaderName"
          :title="showModeHistory === 2 ? '分管负责人' : '部门负责人'"
          min-width="100"
          fixed="left"></vxe-column>
        <vxe-column field="orgName" title="部门" min-width="120" fixed="left"></vxe-column>
        <vxe-column field="userName" title="姓名" min-width="100" fixed="left"></vxe-column>
        <vxe-colgroup field="group0" title="第一季度评价">
          <vxe-column field="leaderRank1" :title="showModeHistory === 2 ? '分管负责人' : '部门负责人'" min-width="100">
            <template #default="{ row }">
              <div>{{ row.leaderRank1 | rankFilter }}</div>
            </template>
          </vxe-column>
          <vxe-column
            field="mainLeaderRank1"
            :title="showModeHistory === 2 ? '单位主要负责人' : '分管负责人'"
            min-width="100">
            <template #default="{ row }">
              <div>{{ row.mainLeaderRank1 | rankFilter }}</div>
            </template>
          </vxe-column>
        </vxe-colgroup>
        <vxe-colgroup field="group1" title="第二季度评价" v-if="quarterNow > 1">
          <vxe-column field="leaderRank2" :title="showModeHistory === 2 ? '分管负责人' : '部门负责人'" min-width="100">
            <template #default="{ row }">
              <div>{{ row.leaderRank2 | rankFilter }}</div>
            </template>
          </vxe-column>
          <vxe-column
            field="mainLeaderRank2"
            :title="showModeHistory === 2 ? '单位主要负责人' : '分管负责人'"
            min-width="100">
            <template #default="{ row }">
              <div>{{ row.mainLeaderRank2 | rankFilter }}</div>
            </template>
          </vxe-column>
        </vxe-colgroup>
        <vxe-colgroup field="group2" title="第三季度评价" v-if="quarterNow > 2">
          <vxe-column field="leaderRank3" :title="showModeHistory === 2 ? '分管负责人' : '部门负责人'" min-width="100">
            <template #default="{ row }">
              <div>{{ row.leaderRank3 | rankFilter }}</div>
            </template>
          </vxe-column>
          <vxe-column
            field="mainLeaderRank3"
            :title="showModeHistory === 2 ? '单位主要负责人' : '分管负责人'"
            min-width="100">
            <template #default="{ row }">
              <div>{{ row.mainLeaderRank3 | rankFilter }}</div>
            </template>
          </vxe-column>
        </vxe-colgroup>
      </vxe-table>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="close" size="mini">关 闭</el-button>
    </span>
  </XnDialog>
</template>

<script>
import XnDialog from '@com/xnDialog.vue'
export default {
  name: 'HistoryEvaluate',
  components: { XnDialog },
  props: {
    historyShow: Boolean,
    tableList: {
      type: Array,
      default: () => [],
    },
    quarterNow: Number,
  },
  data() {
    return {
      tableData: [],
      showModeHistory: 1,
      selfVisible: false,
    }
  },
  computed: {},
  watch: {
    historyShow(news) {
      this.selfVisible = news
    },
    tableList: {
      handler(news) {
        const tableList = []
        news.forEach(item => {
          item.userAssessDataResponseVOS.forEach(li => {
            li.leaderId = item.leaderId
            li.leaderName = item.leaderName
            tableList.push(li)
          })
        })
        this.showModeHistory = news[0].showMode
        this.tableData = tableList
      },
    },
  },
  filters: {
    rankFilter(val) {
      switch (val) {
        case '1':
          return '好'
        case '2':
          return '较好'
        case '3':
          return '一般'
        case '4':
          return '较差'

        default:
          break
      }
    },
  },
  created() {},
  mounted() {},
  methods: {
    close() {
      this.selfVisible = false
      this.$emit('close', false)
      this.$emit('update:visible', false)
    },
    // 通用行合并函数（将相同多列数据合并为一行）
    mergeRowMethod({ row, _rowIndex, column, visibleData }) {
      const fields = ['leaderName']
      const cellValue = row[column.property]
      // if (cellValue && fields.includes(column.property)) {
      if (fields.includes(column.property)) {
        const prevRow = visibleData[_rowIndex - 1]
        let nextRow = visibleData[_rowIndex + 1]
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 }
        } else {
          let countRowspan = 1
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = visibleData[++countRowspan + _rowIndex]
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 }
          }
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
/deep/ .el-dialog {
  height: 60vh;
  .el-dialog__body {
    padding-bottom: 0;
  }
  .el-dialog__footer {
    font-size: 16px;
  }
}
.mytable {
  height: calc(60vh - 140px);
}
</style>
